// JS 如何加载html中与之对应的DOM节点对象
// JS 中内置一个固定对象 document,该对象用于描述当前JS对应的HTML的整个节点树
//      !!! js 对 document 的内容查询和操作,必须保证在页面渲染完成后执行
//          方式1 : 将JS的代码执行移动到页面的最后面
//          方式2 : 使用 window.onload = function(){} 延迟JS到页面加载完成后执行

// 在浏览器运行的JS中,会被默认提供两套扩展语法
//      1 :  Dom 语法 => HTML标签节点操作的语法
//                   => 对应的JS对象document
//      2 :  Bom 语法 => 浏览器窗口控制语法
//                   => 对应的JS对象window => window对象中的方法可以直接使用
// window.prompt("请输入值");
// prompt("请输入值");

// window.onload 是窗口的一个特定事件,表示对应窗口的内容完成加载操作


console.log( document );
// console.table( document )
// let dom1 = document.getElementById("h1Dom");
// console.log(dom1)
window.onload = function (){
    // JS 基于文档对象 document 提供了如下方法进行DOM解析的查询获取操作
    //      + document.getElementById() => 基于标签id的取值进行元素加载
    //                                  => 返回从上向下加载时第一个符合id=h1Dom的节点对象
    let dom1 = document.getElementById("h1Dom");
    console.log(dom1)

    //      + document.getElementsByName() => 基于标签name的取值进行元素加载
    //                                     => 加载所有符合 name=h4Dom的节点对象
    let domList2 = document.getElementsByName("h4Dom");
    console.log( domList2 )

    //      + document.getElementsByTagName() => 基于标签名获取元素
    //                  => 加载所有符合条件的元素,美容嗯以数组下标的方式存储,
    //                     如果存在name也会存储 name 标签的节点(只能存一个),但不能循环
    let domList3 = document.getElementsByTagName("h4");
    console.log( domList3 )
    for (let i = 0; i < domList3.length; i++) {
        console.log(domList3[i])
    }
    // console.log( domList3["h4Dom"] )
    
    //  + document.getElementsByClassName() => 基于class属性取值进行元素加载(只要一个class匹配即可)
    //              => 返回一个符合条件的 元素 数组(集合)
    let dom3 = document.getElementsByClassName("a")
    // let dom3 = document.getElementsByClassName("b")
    console.log( dom3 )

    // 下述两个方法 是 JS 语法更新提供全新的DOM加载方法
    //      下述两个方法在查询DOM元素时,只需要提供 el 规则参数即可
    //       el : element select CSS选择器
    // document.querySelector( el )  => 只加载由上而下加载时最近的一个符合条件的元素
    let dom4 = document.querySelector("#h1Dom");
    console.log(dom4)
    let dom5 = document.querySelector("[name=h4Dom]");
    console.log(dom5)

    // document.querySelectorAll( el )  => 加载所有符合条件的元素
    let arr = document.querySelectorAll("[name=h4Dom]");
    console.log(arr)
}
